<template>
  <div class="hello">
    <h1>文本转语音</h1>
    <el-input
      type="textarea"
      :rows="3"
      placeholder="请输入文本内容"
      style="width:500px;"
      v-model="textarea">
    </el-input>
    <div style="padding-top:20px">
      <el-button type="primary" @click="onConvert">转语音</el-button>
    </div>

    <div v-if="convert" style="padding-top:20px">
      <label>转换结果，点击下载: </label><br/>
      <el-link type="primary" :href="download_url" >{{voice_name}}</el-link>
    </div>




  </div>
</template>

<script>
const api = "http://127.0.0.1:8000"; //for dev
const axios = require('axios');
export default {
  name: 'Text2Voice',
  props: {
    msg: String
  },
  data(){
    return {
      textarea: '',
      voice_name: 'xxxx.mp3',
      download_url: '',
      convert: false
    }
  },
  methods: {
      onConvert(){
        if(this.textarea === ""){
          this.$message({
          message: '文本不能为空',
          type: 'warning'
        });
          return;
        }
        // axios.get(`${api}/text2voice/?text=${this.textarea}`) //for dev
        axios.get(`/text2voice/?text=${this.textarea}`)
        .then( res => {
          console.log(res);
          this.voice_name = res.data.filename;    
          this.download_url =  `${api}/download/${res.data.filename}`;  
          console.log(this.download_url)
          this.convert = true;
        })
        
      }
  }
}
</script>
